<template>
  <div class="audio">
    <div class="audio_img" @click="goPlaypage">
      <img :src="this.$store.state.song_info.song_pic" alt="" />
    </div>
    <div class="audio_p">
      <p>
        {{ song_artists | singer }} -
        {{ this.$store.state.song_info.song_name }}
      </p>
    </div>
    <div class="audio_icon" @click.stop="changeState">
      <van-icon v-if="!$store.state.playPause" name="play-circle-o" />
      <van-icon v-else name="pause-circle-o" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    changeState() {
      if (!this.$store.state.playPause) {
        this.$audio.play();
        this.$store.commit("changeplayPause");
      } else {
        this.$audio.pause();
        this.$store.commit("changeplayPause");
      }
    },
    goPlaypage() {
      this.$router.push({
        name: "Playpage",
      });
    },
  },
  computed: {
    song_artists() {
      if (this.$store.state.song_info.song_artists) {
        return this.$store.state.song_info.song_artists;
      } else {
        return [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.audio {
  width: 100vw;
  height: 8vh;
  background: repeating-linear-gradient(45deg, skyblue, gray 47%, red 100%);
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  .audio_img {
    width: 6vh;
    height: 6vh;
    transform: translateX(2vh);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid rgb(158, 109, 109);
    }
  }
  .audio_p {
    font-size: 15px;
    width: 70%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    position: absolute;
    left: 20%;
  }
  .audio_icon {
    position: absolute;
    right: 2vh;
    i {
      color: white;
      font-size: 30px;
    }
  }
}
</style>
